<template>
  <div class="tool">
  <el-submenu class="submenu7" index="7" style="cursor: pointer;float: right">
  <template slot="title">
<!--    <el-upload-->
<!--      class="avatar-uploader"-->
<!--      action="http://localhost:8080/doUpload"-->
<!--      :show-file-list="false"-->
<!--      :data="{account:account}"-->
<!--      :on-success="handleAvatarSuccess"-->
<!--      :before-upload="beforeAvatarUpload">-->
      <el-avatar style="width: 30px;height: 30px"  :src="avatarPath"></el-avatar>
<!--      <el-avatar v-else></el-avatar>-->
<!--    </el-upload>-->
  </template>
    <el-menu-item index="7-1">开通vip</el-menu-item>
    <el-upload
      class="avatar-uploader"
      :show-file-list="false"
      :auto-upload="true"
      action="#"
      :on-success="handleAvatarSuccess"
      :before-upload="beforeAvatarUpload">
    <el-menu-item index="7-2">上传头像</el-menu-item>
    </el-upload>
    <el-menu-item @click="change()" index="7-3">修改密码</el-menu-item>
    <el-menu-item index="7-4">个人账户</el-menu-item>
    <el-menu-item index="7-5" @click="exit()">退出账户</el-menu-item>
  </el-submenu>
  <el-submenu class="submenu8" index="8" style="float: right">
    <template slot="title"><el-badge :value="24" class="item"><label class="el-icon-bell"></label></el-badge></template>

    <el-menu-item index="8-1"></el-menu-item>
    <el-menu-item index="8-2"></el-menu-item>
    <el-menu-item index="8-3"></el-menu-item>
    <el-menu-item index="8-4"></el-menu-item>

  </el-submenu>
  <el-submenu class="submenu9" index="9" >
    <template slot="title"><a class="toolicon">工具</a></template>
    <el-menu-item index="9-1">论文查证</el-menu-item>
    <el-menu-item index="9-2">学术查重</el-menu-item>
  </el-submenu>
  </div>
</template>

<script>

    import http from "../utils/http";

    export default {
        name: "Tools",
      data() {
        return {
          imageUrl: '',
          account:this.$cookies.get("account"),
          currentUser:this.$store.getters.getUser,
          file:{},
          avatarPath:this.$store.getters.getAvatarBaseUrl+this.$store.getters.getUser.avatarPath,
        };
      },
      created() {
        this.getHeadUrl();

      },
      methods:{
          exit(){
            this.$store.commit('REMOVE_INFO')
            this.$router.push('/login');
          },
        getHeadUrl(){
          const _this=this;
          // axios.get('http://localhost:8080/getHeadUrl?account='+this.$cookies.get("account"))
          //   .then((response) => {
          //     this.imageUrl=response.data.substring(16)
          //   })
        },
        change(){
            this.$router.push('/changePassword');
        },
        handleAvatarSuccess(res, file) {
            console.log("success")
          this.avatarPath = URL.createObjectURL(file.raw);
        },
        beforeAvatarUpload(file) {
          // const isJPG = file.type === 'image/jpeg';
          const isLt2M = file.size / 1024 / 1024 < 2;
          console.log(file)
          // if (!isJPG) {
          //   this.$message.error('上传头像图片只能是 JPG 格式!');
          // }
          if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 2MB!');
          }
          // this.file=file;
          this.uploadAvatar(file)
          return isLt2M;
        },

        uploadAvatar(file){
            let fd=new FormData();
            fd.append("files",file)
          fd.append("studentId",this.currentUser.role=='student'?this.currentUser.studentId:this.currentUser.teacherId)
          fd.append("workId",0);
            console.log(fd)
            fd.append("role",this.currentUser.role);
            http.post('/upload/uploadWork',fd).then((res)=>{
              if(res.data.code==200){
                this.avatarPath = URL.createObjectURL(file);
                this.currentUser.avatarPath =this.avatarPath;
                this.$store.commit('SET_USER',this.currentUser)
              }
            })
        }
      }
    }
</script>

<style>
  .toolicon{
    display: inline-block;
    background: url('https://www.ketangpai.com/Public/Home/img/tool_icon.png') 0/25px no-repeat;
    vertical-align: middle;
    margin-right: 5px;
    padding-left: 30px;
  }
  .tool{
    width: 250px;
    height: 60px;
    padding-right: 50px;
    float: right;
    position: relative;
  }
  .tool .el-submenu:hover{
    background-color: white!important;
    cursor: pointer;
  }
  .tool .el-submenu__icon-arrow{
    display: none!important;
  }
  .tool .el-badge__content.is-fixed{
    top: 15px;
    right: 15px;
  }
  .submenu7{
    position: absolute;
    top: 2px;
    right: 32px;

  }
  .submenu8{
    position: absolute;
    top: 2px;
    right: 105px;
  }
  .submenu9{
    position: absolute;
    top: 2px;
    right: 160px;
  }
</style>
